<template>
    <div>
        <Header :theme="false"></Header>
        <div class="banner">
            <van-swipe :height="150" :autoplay="3000" lazy-render>
                <van-swipe-item v-for="image in images" :key="image">
                    <img :src="image" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div class="main">
            <div class="line-recommend">
                <van-grid style="width: 100%;" :column-num="3">
                    <van-grid-item @click="fromShow = true">
                        {{ fromValue }}
                    </van-grid-item>
                    <van-popup v-model:show="fromShow" round position="bottom">
                        <van-cascader v-model="fromValue" title="请选择始发地" :options="fromOptions"
                            @close="fromShow = false" @finish="onFromFinish" />
                    </van-popup>
                    <van-grid-item>
                        <van-icon style="color: #328;" name="weapp-nav" />
                    </van-grid-item>
                    <van-grid-item @click="toShow = true">
                        {{ toValue }}
                    </van-grid-item>
                    <van-popup v-model:show="toShow" round position="bottom">
                        <van-cascader v-model="toValue" title="请选择终点" :options="toOptions" @close="toShow = false"
                            @finish="onToFinish" />
                    </van-popup>
                </van-grid>
                <van-button @click="createPlan" style="width: 300px;margin-top: 10px;" type="primary"
                    block>生成规划</van-button>
            </div>
            <div class="recommend-place">
                <div class="title">旅游推荐</div>
                <van-grid :gutter="10" :column-num="2">
                    <van-grid-item v-for="value in 8" :key="value" class="recommend-place-item">
                        <img
                            src="https://img0.baidu.com/it/u=2715030315,2192914051&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1719680400&t=3963056d8cd4cf01d7628e265815b73e" />
                        <div class="title">鱼尾狮公园</div>
                        <p>鱼尾狮公园（Merlion Park），是新加坡面积最小的公园。1972年，前新加坡总理李光耀为鱼尾狮公园剪彩开幕。现公园已迁到浮尔顿1号的新家。</p>
                    </van-grid-item>
                </van-grid>
            </div>
        </div>
    </div>
</template>

<script setup>
import Header from '../components/Header.vue';
import { useCascaderAreaData } from '@vant/area-data';
import { ref } from 'vue';
import { showSuccessToast } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter()
const images = ref([
    'https://img0.baidu.com/it/u=3645329548,1681358786&fm=253&fmt=auto&app=138&f=JPEG?w=710&h=240',
    'https://img.zcool.cn/community/011d4258788520a8012060c8776640.jpg@1280w_1l_2o_100sh.jpg',
])
const fromShow = ref(false)
const toShow = ref(false)
const fromOptions = useCascaderAreaData();
const toOptions = ref([
    {
        text: '韩国',
        value: '01'
    },
    {
        text: '朝鲜',
        value: '02'
    },
    {
        text: '日本',
        value: '03'
    },
    {
        text: '美国',
        value: '04'
    },
    {
        text: '新加坡',
        value: '05'
    },
    {
        text: '加拿大',
        value: '06'
    },
    {
        text: '中国香港',
        value: '07'
    },
    {
        text: '中国澳门',
        value: '08'
    },
    {
        text: '中国台湾',
        value: '09'
    },
])
const fromValue = ref('大连市')
const toValue = ref('新加坡')
const onFromFinish = (value) => {
    fromValue.value = value.selectedOptions[1].text
    fromShow.value = false
}
const onToFinish = (value) => {
    toValue.value = value.selectedOptions[0].text
    toShow.value = false
}
const createPlan = () => {
    showSuccessToast({
        message: fromValue.value + '到' + toValue.value+'的规划生成成功',
        duration: 1000,
        onClose: () => {
            router.push('/myPlan')
        }
    })
}
</script>

<style scoped>
.banner {
    width: 100%;
    margin-top: -10px;
    z-index: 1;
}

.banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main {
    height: 100%;
    padding: 10px;
    margin-bottom: 50px;
    background-color: #eee;
}

.line-recommend {
    display: flex;
    padding: 10px;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
}

.recommend-place {
    margin: 10px 0;
}

.recommend-place .title {
    font-size: 15px;
    margin-left: 10px;
    padding: 10px 0;
    font-weight: bold;
}

.recommend-place-item {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.recommend-place-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.recommend-place-item .title {
    font-size: 12px;
    color: #333;
}

.recommend-place-item p {
    font-size: 10px;
    color: #666;
}
</style>